<template>
  <div id="emsDate">
    <div id="emsDate-choose">
      <span>时间</span>
      <Input
        v-model="datePicker"
        placeholder="请选择"
        icon="md-calendar"
        @click.native.stop="inputClick"
        :style="{width: isTimeFlag ? '220px' : '220px'}"
      />
    </div>
    <div id="emsDate-container" v-click-outside="onClickOutside" v-show="isAll">
      <ul style="border-left: 1px solid #4C90FD;" class="emsTable" v-show="isYear" ref="refYear">
        <li v-for="(item, index) in yearList" :key="index" :class="{active: year === item}"
            @click="yearClick(item)">{{item}} 年
        </li>
      </ul>
      <ul v-show="isMonth" ref="refMonth" class="emsTable" >
        <li v-for="(item, index) in monthList" :key="index" :class="{active: month === item}"
            @click="monthClick(item)">{{item}} 月
        </li>
      </ul>
      <ul v-show="isDay" ref="refDay" class="emsTable" >
        <li v-for="(item, index) in dayList" :key="index" :class="{active: day === item}"
            @click="dayClick(item)">{{item}} 日
        </li>
      </ul>
      <ul v-show="isTime && isTimeFlag" ref="refTime" class="emsTable" >
        <li v-for="(item, index) in timeList" :key="index" :class="{active: time === item}"
            @click="timeClick(item)">{{item}} 时
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'mDate',
    props: {
      // 几时 是否显示
      isTimeFlag: {
        type: Boolean,
        default: true
      },
      // 时间输入框的值
      datePicker: {
        type: String,
        default: ''
      }
    },
    watch: {},
    data () {
      return {
        /*
         * 时间日期选择组件
        * */
        // input 绑定的 value
        // 年的数据 数组
        yearList: [],
        // 月的数据 数组
        monthList: Array.from(Array(12), (v, k) => {
          if (k < 9) return '0' + (k + 1)
          return '' + (k + 1)
        }),
        // 各月天数
        baseMonthsDay: [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31],
        // 日的数据 数组
        dayList: [],
        // 时的数据 数组
        timeList: Array.from(Array(24), (v, k) => {
          if (k < 10) return '0' + k
          return '' + k
        }),
        // 各个激活的
        year: null,
        month: null,
        day: null,
        time: null,
        // 各个的 显示隐藏
        isAll: false,
        isYear: false,
        isMonth: false,
        isDay: false,
        isTime: false
      }
    },

    created () {

    },
    mounted () {
      this.yearList = this.yearCount(17)
    },
    computed: {},
    methods: {
      /*
      * 时间日期选择组件
      * */
      // 年的计算
      yearCount (num) {
        let year = 2013
        let arr = []
        for (let i = 0; i < num; i++) {
          year += 1
          arr.push(year)
        }
        arr = arr.map(v => v + '')
        return arr
      },
      // 天的计算
      dayCount (days) {
        let arr = []
        for (let i = 1; i <= days; i++) {
          arr.push(i)
        }
        arr = arr.map(v => {
          if (v < 10) return '0' + v
          return '' + v
        })
        return arr
      },
      // end
      // 点击区域外面的方法
      onClickOutside () {
        if (!this.isAll) return false
        this.isAll = !this.isAll
        if (this.datePicker.length > 0 && this.datePicker.length <= 4) {
          this.isYear = !this.isYear
          this.isMonth = !this.isMonth
        } else if (this.datePicker.length > 4 && this.datePicker.length <= 7) {
          this.isYear = !this.isYear
          this.isMonth = !this.isMonth
        } else if (this.datePicker.length > 7 && this.datePicker.length <= 10) {
          this.isYear = !this.isYear
          this.isMonth = !this.isMonth
          this.isDay = !this.isDay
        } else {
          this.isYear = !this.isYear
          this.isMonth = !this.isMonth
          this.isDay = !this.isDay
          this.isTime = !this.isTime
        }
      },
      // 时间输入框的点击事件
      inputClick () {
        this.isAll = !this.isAll
        this.isYear = !this.isYear
        // 年的 ul 显示
        if (this.datePicker.length > 0 && this.datePicker.length <= 4) {
          this.year = this.datePicker
          this.isMonth = !this.isMonth
          this.month = null
          let index = this.yearList.findIndex(k => k === this.year)
          this.$nextTick(() => {
            this.$refs.refYear.scrollTop = index * 30
          })
          // 年，月 的 ul显示
        } else if (this.datePicker.length > 4 && this.datePicker.length <= 7) {
          this.year = this.datePicker.substring(0, 4)
          this.month = this.datePicker.substring(this.datePicker.length - 2)
          this.isMonth = !this.isMonth
          let indexYear = this.yearList.findIndex(k => k === this.year)
          this.$nextTick(() => {
            this.$refs.refYear.scrollTop = indexYear * 30
          })
          let indexMonth = this.monthList.findIndex(k => k === this.month)
          this.$nextTick(() => {
            this.$refs.refMonth.scrollTop = indexMonth * 30
          })
          //  年，月，日 的 ul 显示
        } else if (this.datePicker.length > 7 && this.datePicker.length <= 10) {
          this.year = this.datePicker.substring(0, 4)
          this.month = this.datePicker.substring(5, 7)
          this.isRun()
          this.day = this.datePicker.substring(this.datePicker.length - 2)
          this.isMonth = !this.isMonth
          this.isDay = !this.isDay
          let indexYear = this.yearList.findIndex(k => k === this.year)
          this.$nextTick(() => {
            this.$refs.refYear.scrollTop = indexYear * 30
          })
          let indexMonth = this.monthList.findIndex(k => k === this.month)
          this.$nextTick(() => {
            this.$refs.refMonth.scrollTop = indexMonth * 30
          })
          let indexDay = this.dayList.findIndex(k => k === this.day)
          this.$nextTick(() => {
            this.$refs.refDay.scrollTop = indexDay * 35
          })
          // 年， 月，日，时的 ul 显示
        } else {
          this.year = this.datePicker.substring(0, 4)
          this.month = this.datePicker.substring(5, 7)
          this.isRun()
          this.day = this.datePicker.substring(8, 10)
          this.time = this.datePicker.substring(this.datePicker.length - 2)
          if (this.isTimeFlag) {
            this.isMonth = true
            this.isDay = true
            this.isTime = true
          } else {
            this.isMonth = !this.isMonth
            this.isDay = !this.isDay
            this.isTime = !this.isTime
          }
          let indexYear = this.yearList.findIndex(k => k === this.year)
          this.$nextTick(() => {
            this.$refs.refYear.scrollTop = indexYear * 30
          })
          let indexMonth = this.monthList.findIndex(k => k === this.month)
          this.$nextTick(() => {
            this.$refs.refMonth.scrollTop = indexMonth * 30
          })
          let indexDay = this.dayList.findIndex(k => k === this.day)
          this.$nextTick(() => {
            this.$refs.refDay.scrollTop = indexDay * 35
          })
          let indexTime = this.timeList.findIndex(k => k === this.time)
          this.$nextTick(() => {
            this.$refs.refTime.scrollTop = indexTime * 35
          })
        }
      },
      // 判断是否是闰年
      isRunYear (fullYear) {
        return (fullYear % 4 === 0 && (fullYear % 100 !== 0 || fullYear % 400 === 0))
      },
      // 月 的 点击方法
      monthClick (item) {
        this.month = item
        this.$emit('monthClick')
        // this.datePicker = this.year + '-' + this.month
        if (this.isTimeFlag) {
          this.day = '01'
          this.time = '00'
          let indexDay = this.dayList.findIndex(k => k === this.day)
          this.$nextTick(() => {
            this.$refs.refDay.scrollTop = indexDay * 35
          })
          let indexTime = this.timeList.findIndex(k => k === this.time)
          this.$nextTick(() => {
            this.$refs.refTime.scrollTop = indexTime * 35
          })
          this.isTime = true
          this.isDay = true
        } else {
          this.day = null
          this.isTime = false
          this.isDay = true
        }
        this.isRun()
      },
      // 判断是平年还是 闰年 返回的 天的数组
      isRun () {
        if (this.isRunYear(this.year) && Number(this.month) === 2) {
          this.dayList = this.dayCount(this.baseMonthsDay[Number(this.month) - 1] + 1)
        } else {
          this.dayList = this.dayCount(this.baseMonthsDay[Number(this.month) - 1])
        }
      },
      // 年的 点击方法
      yearClick (item) {
        this.year = item
        this.$emit('yearClick')
        // this.datePicker = this.year
        if (this.isTimeFlag) {
          this.month = '01'
          this.day = '01'
          this.time = '00'
          let indexMonth = this.monthList.findIndex(k => k === this.month)
          this.$nextTick(() => {
            this.$refs.refMonth.scrollTop = indexMonth * 30
          })
          let indexDay = this.dayList.findIndex(k => k === this.day)
          this.$nextTick(() => {
            this.$refs.refDay.scrollTop = indexDay * 35
          })
          let indexTime = this.timeList.findIndex(k => k === this.time)
          this.$nextTick(() => {
            this.$refs.refTime.scrollTop = indexTime * 35
          })
          this.isMonth = true
          this.isDay = true
          this.isTime = true
        } else {
          this.isMonth = true
          this.month = null
          this.isDay = false
          this.isTime = false
        }
      },
      // 时 的 点击方法
      timeClick (item) {
        this.time = item
        this.$emit('timeClick')
        // this.datePicker = this.year + '-' + this.month + '-' + this.day + ' ' + this.time
        this.isAll = !this.isAll
        this.isTime = false
        this.isYear = false
        this.isMonth = false
        this.isDay = false
      },
      // 天的 点击方法
      dayClick (item) {
        this.day = item
        this.$emit('dayClick')
        // this.datePicker = this.year + '-' + this.month + '-' + this.day
        if (this.isTimeFlag) {
          this.isTime = true
        } else {
          this.isAll = !this.isAll
          this.isYear = false
          this.isMonth = false
          this.isDay = false
        }
      }
    },
    destroyed () {

    },
    components: {}
  }
</script>

<style lang='scss'>
  #emsDate {
    position: relative;
    display: inline-block;
    #emsDate-choose {
      display: flex;
      justify-content: center;
      align-items: center;
      span {
        color: $font-f;
        width: 60px;
        @include ems-border;
        height: 40px;
        text-align: center;
        line-height: 36px;
        border-right: 0;
        font-size: 14px;
      }
      .ivu-input:hover {
        cursor: pointer;
      }
      .ivu-input {
        background-color: $color-146;
        @include ems-border;
        border-radius: 0;
        color: #fff;
        font-size: 18px;
        height: 40px;
        line-height: 1.5;
        padding: 0px 15px;
      }
      .ivu-input-icon {
        line-height: 38px;
        font-size: 24px;
        color: $font-f;
        &:hover {
          cursor: pointer;
        }
      }
      .ivu-input:focus {
        @include date-border;
      }
    }
    #emsDate-container {
      display: inline-block;
      position: absolute;
      z-index: 99999;
      top: 50px;
      left: 62px;
      .active {
        background-color: $color-126;
      }
      ul {
        width: 70px;
        height: 180px;
        overflow: auto;
        @include date-border;
        border-left: none;
        display: inline-block;
        color: #fff;
        background-color: $color-146;
        li {
          height: 40px;
          line-height: 40px;
          padding-left: 10px;
          font-size: 14px;
          &:hover {
            background-color: $color-126;
            cursor: pointer;
          }
        }
      }
    }
  }
</style>
